/*
 * @Author: hewenke
 * @Date: 2023-09-13 16:12:34
 * @LastEditors: hewenke hewenke@dataojo.com
 * @LastEditTime: 2023-09-15 15:35:41
 * @FilePath: \react-app\src\pages\home\index.js
 * @Description: Home page
 */
// import { useNavigate } from 'react-router-dom'
import { Button, theme, Modal } from 'antd'
import { logout, goto } from '@/api'
import './styles.less'

const { useToken } = theme


function Home() {
  // // 创建路由钩子
  // const navigate = useNavigate()

  // 获取Design Token
  const { token } = useToken()

  const [modal, contextHolder] = Modal.useModal()

  // 退出登录
  const exit = () => {
    modal.confirm({
      title: '是否退出登录？',
      onOk() {
        logout()
      },
    })
  }

  return (
    <div className="home-wrapping">
      <h1 style={{ color: token.colorText }}>Home Page</h1>
      <div className="ipt-con">
        <Button onClick={() => { goto('/login') }}>组件外跳转</Button>
      </div>
      <div className="ipt-con">
        <Button type="primary" onClick={exit}>返回登录</Button>
      </div>
      {
        // 这是最终解决Modal.method跟随换肤的关键，contextHolder在组件DOM中随便找个地方放就行
        contextHolder
      }
    </div>
  )
}

export default Home